import React, { Component, PropTypes } from 'react';

class Counter extends Component {
    constructor(props) {
        console.log('[components/index.js] ->Counter.constructor');
        // 子类在获取this前必须调用super
        super(props);
        this.incrementAsync = this.incrementAsync.bind(this);
        this.incrementIfOdd = this.incrementIfOdd.bind(this);
    }

    incrementIfOdd() {
        console.log('[components/index.js] ->Counter.incrementIfOdd');
        if (this.props.value % 2 !== 0) {
            this.props.onIncrement();
        }
    }

    incrementAsync() {
        console.log('[components/index.js] ->Counter.incrementAsync');
        setTimeout(this.props.onIncrement, 1000);
    }

    render() {
        console.log('[components/index.js] ->Counter.render, props:', this.props);
        const { value, onIncrement, onDecrement } = this.props;
        return (
            <p>
                Clicked: {value} times
                {' '}
                <button onClick={onIncrement}>+</button>
                {' '}
                <button onClick={onDecrement}>-</button>
                {' '}
                <button onClick={this.incrementIfOdd}>Increment if odd</button>
                {' '}
                <button onClick={this.incrementAsync}>Increment async</button>
            </p>
        );
    }
}

Counter.propTypes = {
    // value必须为数字，且必须存在
    value: PropTypes.number.isRequired,
    // onIncrement必须为fucntion，且必须存在
    onIncrement: PropTypes.func.isRequired,
    onDecrement: PropTypes.func.isRequired
};

export default Counter;
